<template>
    <div>
        <el-dialog
            :title="isAdd ? '添加规格' : '编辑规格'"
            :visible.sync="isShow"
            center
            :show-close="false"
        >
            <el-form
                :model="specsform"
                :rules="rules"
                label-position="right"
                label-width="100px"
                ref="specsform"
            >
                <el-form-item label="规格名称" prop="specsname">
                    <el-input v-model="specsform.specsname"></el-input>
                </el-form-item>
                <el-form-item label="规格属性" prop="attrs">
                    <div v-for="(item,index) in specsform.attrs" :key="index" style="margin-bottom: 15px;">
                        <el-input v-model="specsform.attrs[index]" class="mid-input">
                            <template slot="append">
                               <el-button type="primary" v-if="index == 0" @click="addAttr">新增规格属性</el-button>
                                <el-button type="danger" v-else @click="delAttr(index)">删除属性</el-button>
                            </template>
                        </el-input>
                        
                    </div>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch
                        v-model="specsform.status"
                        active-color="#13ce66"
                        :active-value="1"
                        :inactive-value="2"
                    ></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit" v-if="isAdd"
                    >添 加</el-button
                >
                <el-button type="primary" @click="submit" v-else
                    >修 改</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Vuex from "vuex";
export default {
    data() {
        return {
            //表单的验证规则
            rules: {
                roleid: {
                    required: true,
                    message: "请选择所属角色",
                    trigger: "blur",
                },
                specsname: [
                    {
                        required: true,
                        message: "请输入规格名称",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 6,
                        message: "长度在 2 到 6 个字符",
                        trigger: "blur",
                    },
                ],
            },
            defaultProps: {
                children: "children",
                label: "title",
            },
        };
    },
    props: ["isDialog", "isAdd"],
    methods: {
        //点击添加属性
        addAttr(){
            if(this.specsform.attrs.length<5){
                this.specsform.attrs.push('')
            }else{
                this.$message.warning('最多只能添加5个属性')
            }
        },
        delAttr(i){
            this.specsform.attrs.splice(i,1)
        },
        //Vuex的函数
        ...Vuex.mapMutations({
            //设置一条数据 也就是设置弹框的数据
            setspecsinfo: "specs/setspecsinfo",
        }),
        ...Vuex.mapActions({
            getlist: "specs/specslist_a", //获取规格列表 接口
            specsadd: "specs/specsadd_a", //获取规格添加 接口
            specsedit: "specs/specsedit_a", //获取规格添加 接口
            specscount: "specs/specscount_a", //获取规格总数 接口
        }),
        //点击取消 弹框消失
        cancel() {
            this.$emit("cancel", false);
            this.reset();
        },
        //reset 重置弹框表单的数据
        reset() {
            this.setspecsinfo({
                id: "",
                specsname: "",
                attrs: [''],
                status: 1,
            });
        },
        //点击添加或修改按钮提交
        submit() {
            //通过验证器判断是否符合rules规则
            this.$refs.specsform.validate((vaild) => {
                if (vaild) {
                    let newSpecsform = JSON.parse(JSON.stringify(this.specsform))
                    newSpecsform.attrs = newSpecsform.attrs.join(',')
                    //vuex方法,需要去watch监听事件的变化
                    if (this.isAdd) {
                        this.specsadd(newSpecsform);
                    } else {
                        this.specsedit(newSpecsform);
                    }
                } else {
                    this.$message.error("输入有误");
                    this.reset();
                    return false;
                }
            });
        },
    },
    computed: {
        //获取规格列表
        ...Vuex.mapGetters({
            specsform: "specs/getspecsinfo",
            specsTitle: "specs/getspecsTitle",
            page: "specs/getPage",
        }),
        //接收传递来的prop属性，
        isShow: {
            get() {
                return this.isDialog;
            },
            set() {
                this.$emit("cancel", false);
            },
        },
    },
    watch: {
        //监听输出的内容是否变化，list组件也会受影响
        specsTitle(val) {
            if (val.code == 200) {
                this.$message.success(val.msg);
                this.cancel();
            } else {
                this.$message.error(val.msg);
                this.reset();
            }
            //调用 规格总数 接口
            this.specscount();
            // 调用 获取列表 接口
            this.getlist(this.page);
        },
    },
};
</script>

<style scoped></style>
